<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <title>登录</title>
</head>
<body>
<div class="jumbotron" style="text-align: center;">
    <h1>欢迎</h1>
</div>
<div class="container">
    <div class="row">
        <div class="panel panel-default" style="width:560px;margin:0 auto auto auto;text-align:center">
            <div class="panel-heading"><h2>SIGN IN</h2></div>
            <div class="panel-body">
                <br>
                <form id="sign_in_form" action="signin" method="post" role="form">
                    <div class="alert alert-warning alert-dismissible" id="nameBox" role="alert" style="display: none">
                        <b>Warning!</b> 用户名不得少于3位!
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">用户名：</span>
                        <input id="stuId" name="stuId" type="text" class="form-control" placeholder="stuId">
                    </div>
                    <br>
                    <div class="alert alert-warning alert-dismissible" id="pwdBox" role="alert" style="display: none">
                        <b>Warning!</b> 密码不得少于5位!
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                        <input id="pwd" name="pwd" type="password" class="form-control" placeholder="pwd">
                    </div>
                    <br>
                    <div class="alert alert-warning alert-dismissible" id="codeBox" role="alert" style="display: none">
                        <b>Warning!</b> 验证码错误!
                    </div>
                    <div class="alert alert-warning alert-dismissible" id="codeNullBox" role="alert" style="display: none">
                        <b>Warning!</b> 请输入验证码!
                    </div>
                    <div style="width:70%;float: left">
                        <div class="input-group">
                            <span class="input-group-addon">验证码：</span>
                            <input type="text" id="checkcode" name="checkcode" class="form-control"
                                   placeholder="CheckCode">
                        </div>
                    </div>

                    <div style="width: 30%;float: left">
                        <img id="codeImg" src="checkcode" onclick="RefreshCode()">
                    </div>
                    <br><br><br>
                    <input type="hidden" name="actionName" value="Log_check">
                    <div>
                        <input class="btn btn-default" type="submit"  value="登陆">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input class="btn btn-default" type="button" onclick="location='signup'" value="注册">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $("#stuId").click(function () {
        $("#nameBox").hide();
    });
    $("#pwd").click(function () {
        $("#pwdBox").hide();
    });
    $("#checkcode").click(function () {
        $("#codeNullBox").hide();
        $("#codeErrorBox").hide();
    });

    $(document).ready(function () {
        var options = {
            //target:        '#output1',   // 用服务器返回的数据 更新 id为output1的内容.
            beforeSubmit:  showRequest,  // 提交前
            success:       showResponse,  // 提交后
            //另外的一些属性:
            //url:       url,         // 默认是form的action，如果写的话，会覆盖from的action.
            //type:      type,        // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
            dataType:  'json',        // 'xml', 'script', or 'json' (接受服务端返回的类型.)
            //clearForm: true,        // 成功提交后，清除所有的表单元素的值.
            //resetForm: true,        // 成功提交后，重置所有的表单元素的值.


            //timeout:   3000 //当请求大于3秒后，跳出请求.
        };


        $('#sign_in_form').ajaxForm(options);

    });

    // 提交前
    function showRequest() {

        var username = $("#stuId").val();
        var password = $("#pwd").val();

        var checkcode=$("#checkcode").val();
        var flag=true;
        if(checkcode===null||checkcode.length!==4){
            $("#codeNullBox").show();
            flag=false;
        }
        if(username===null||username.length<3){
            $("#nameBox").show();
            flag=false;
        }
        if(password===null||password<5){
            $("#pwdBox").show();
            flag=false;
        }

        return flag;
    }

    //  提交后
    function showResponse(responseText, statusText)  {
        if(statusText==="success"){
            switch (responseText.code){
                case 200:
                    window.location.href="stu/"+$("#stuId").val();
                    break;
                case 201:
                    window.location.href="admin/"+$("#stuId").val();
                    break;
                case 224:
                    window.location.href="monitor/"+$("#stuId").val();
                    break;
                case 205:
                    alert(responseText.msg);
                    RefreshCode();
                    break;
                default:
                    alert(responseText.msg);
            }

        }else {
            alert('提交状态: ' + statusText + '\n\n 返回的内容是: \n' + responseText.msg);
        }
    }

    function RefreshCode() {
        document.getElementById("codeImg").src = document.getElementById("codeImg").src + "?nocache=" + new Date().getTime();
    }
</script>
</body>
</html>